<template>
  <Empty>
    <Form
      :form-data="formData"
      :control-list="controlList"
      type="submit"
      :inline="false"
      width="500px"
      @entry="entry"
    ></Form>
  </Empty>
</template>

<script>
import Form from "@/views/task/form.vue";
import Empty from "@/views/component/empty/index.vue";
import { stringEmptyValidator } from "@/utils/validator/index";
import { createRole } from "@/api/role";
import { showCreateOk, showCreateNg } from "@/utils/message";
import { getUserByAll } from "@/api/user";
import { createTask } from "@/api/task";

export default {
  name: "CreateTaskForm",
  components: {
    Form,
    Empty,
  },
  beforeRouteEnter(to, from, next) {
    next(async (vm) => {
      await vm.getAllUser();
    });
  },
  methods: {
    async getAllUser() {
      let result = await getUserByAll();
      this.allUser = result.data.list;
    },
    async entry(formData) {
      try {
        await createTask(formData);
        showCreateOk();
        this.$router.back();
      } catch (error) {
        showCreateNg();
      }
    },
  },
  data() {
    return {
      allUser: [],
      formData: {
        name: "",
        userUuid: "",
        content: "",
        isComplete: "2",
      },
      controlList: [
        {
          type: "autocomplete",
          label: "员工姓名",
          prop: "name",
          clearable: true,
          change: (event) => {
            if (!event.value) {
              let user = this.allUser.find((user) => {
                return user.name === event;
              });
              if (!user) {
                this.formData.name = event;
                this.formData.userUuid = "";
              } else {
                this.formData.name = user.name;
                this.formData.userUuid = user.uuid;
              }
            } else {
              this.formData.name = event?.name;
              this.formData.userUuid = event?.uuid;
            }
          },
          query: (queryString, cb) => {
            let tempUserList = this.allUser.filter((user) => {
              return user.name.includes(queryString);
            });
            tempUserList = tempUserList.map((user) => {
              return {
                ...user,
                label: user.name,
                value: { name: user.name },
              };
            });
            cb(tempUserList);
          },
          rule: [
            {
              required: true,
              trigger: ["blur", "change"],
              validator: (rule, value, callback) => {
                if (this.formData.userUuid.length === 0) {
                  return callback("未找到员工");
                }
                return callback();
              },
            },
          ],
        },
        {
          type: "textarea",
          label: "任务内容",
          prop: "content",
          clearable: true,
          change: (event) => {
            this.formData.content = event ?? "";
          },
          rule: [
            {
              required: true,
              trigger: ["blur", "change"],
              validator: stringEmptyValidator,
            },
          ],
        },
      ],
    };
  },
};
</script>
